<template>
	<div style="width: 100%;height: 100%">
		<title-common style="margin-bottom: 10px" v-if="config.showTitle" :config="viewConfig"></title-common>
		<component v-if="currentView" :is="currentView" ref="customComponent" :config="viewConfig" :screenConfig="screenConfig"></component>
	</div>
</template>

<script>
import ComponentView from "@/views/modules/preview/components/common/component-view.js";
import customViewJs from "@/views/modules/preview/components/js/custom-view.js";
import  customComponents from "@/views/modules/custom-components/index.js"
import {markRaw} from 'vue'

export default {
	name: "custom-view",
	mixins:[ComponentView,customComponents],
	inject:{
		screenVm:{
			default:()=>{
				return "";
			}
		}
	},
	data() {
		return {
			viewConfig:this.config,
			currentView:""
		}
	},
	mounted(){
		//将注册的组件放到最外层对象中 方便js获取
        this.screenVm.customComponents[this.viewConfig.key]=this;
		let self=this;
		this.$nextTick(function (){
			self.screenVm.componentNum++;
		});
	},
	methods: {
		getData(){
			let template=this.getTemplate();
            this.currentView = markRaw({
                template: template,
                mixins: [customViewJs,customComponents],
            })
		},
		/**
		 * 构建模板
		 * @returns {string}
		 */
		getTemplate(){
			let template="";
			if(this.viewConfig.customName){
				template="<"+this.viewConfig.customName+" ref='controllerView' ";
				//触发事件方法
				if(this.viewConfig.events){
					for (let key in this.viewConfig.events) {
						let eventConfig= this.viewConfig.events[key];
						if(eventConfig && eventConfig.length){
							template+="@"+key+"=\"handViewEvent(arguments,'"+key+"')\"";
						}
					}
				}
				template+=" ></"+this.viewConfig.customName+">";
			}
			return template;
		}
	}
}
</script>

<style scoped>

</style>
